<template>
  <div class="wBd">
    <div class="contArticle">
      <!-- 标题 -->
      <div class="contArticle_tit">
        <h2>{{ activityById.activityTitle }}</h2>
      </div>
      <div class="contArticle_author">
        <span>{{ activityById.createTime }}</span>
        <span>来源：{{ activityById.createBy }}</span>
        <span>（浏览量：{{ activityById.click }}）</span>
      </div>
      <!-- 正文 -->
      <div class="contArticle_text">
        <div id="fontzoom" >
          <div class="qudiaoBorder">
            <div class="ql-editor" v-html="activityById.activityContent"></div>
          </div>
        </div>
<!--        <div style="text-indent: 2rem;" id="fontzoom" v-html="activityById.activityContent"></div>
        <div v-if="activityById.img.length>0" v-for="(item,index) in activityById.img" :key="index">
&lt;!&ndash;          <img style="width: 100%;text-align: center;height: 100%" :src="item.url">&ndash;&gt;
          <img style="width: 100%;text-align: center;height: 100%" :src="changeUrl(item.fileName)">
        </div>-->
      </div>
      <div style="border-top: 1px dotted #ccc;margin-top: 20px;background: none;"></div>
      <div class="contArticle_bot_page">
        <div class="cA_b_prew">
          <span style="color:red">上一篇：</span>
          <a @click="btnClick(upActivity)" v-if="upActivity!=='已是首条'" href="javascript:;"
             :title="'标题：'+upActivity.activityTitle+'\n'+'浏览量：'+upActivity.click+'\n'+'发表时间：'+upActivity.createTime"
          >{{ vague('3', upActivity.activityTitle) }}
            <span style="color: #666;padding-left: 10px;">[ {{ parseTime(upActivity.createTime, '{m}-{d}') }} ]</span>
          </a>
          <span style="color: red" v-else>{{ upActivity }}</span>
        </div>
        <div class="cA_b_next">
          <span style="color:red">下一篇：</span>
          <a @click="btnClick(nextActivity)" v-if="nextActivity!=='已是尾条'" href="javascript:;"
             :title="'标题：'+nextActivity.activityTitle+'\n'+'浏览量：'+nextActivity.click+'\n'+'发表时间：'+nextActivity.createTime"
          >{{ vague('3', nextActivity.activityTitle) }}
            <span style="color: #666;padding-left: 10px;">[ {{ parseTime(nextActivity.createTime, '{m}-{d}') }} ]</span>
          </a>
          <span style="color: red" v-else>{{ nextActivity }}</span>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { getActivity, getNextActivity, getUpActivity, updateActivityClick } from '@/api/activity'

export default {
  name: 'Edit',
  inject: ['reloadMain'],  //注入依赖
  data() {
    return {
      activityList: [], // 活动数据
      activityById: {}, //单条活动
      upActivity: '已是首条',//上一条活动
      nextActivity: '已是尾条'  //下一条活动
    }
  },
  computed: {
    id() {
      return this.$route.query.id
    }
  },
  created() {
    this.getList(this.id)
  },
  methods: {
    getList(id) {
      getUpActivity(id).then(response => {
        if (response.data) {
          this.upActivity = response.data
        } else {
          this.upActivity = '已是首条'
        }
      })
      getNextActivity(id).then(response => {
        if (response.data) {
          this.nextActivity = response.data
        } else {
          this.nextActivity = '已是尾条'
        }
      })
      getActivity(id).then(response => {
        this.activityById = response.data
        // this.activityById.img = this.change(this.activityById.img)
      })
    },
    btnClick(data) {
      updateActivityClick(data)
      this.$router.push({
        path: '/activity/list/edit',
        query: {
          id: data.activityId
        }
      })
      this.reloadMain()
    }
  }
}
</script>

<style scoped>
.qudiaoBorder .ql-container.ql-snow {
  border: none;
}

.qudiaoBorder .ql-editor {
  overflow: hidden;
  padding: 0;
}
</style>
